<template>
  <m-card>
    <view class="salon">
      <view class="salon-item" v-for="(item, index) in list" :key="index">
        <view class="flex align-center c333 font32 fw500">
          <view class="salon-item__left c481">{{ item.stm }}</view>
          <view class="salon-item__right text-ell">{{ item.title }}</view>
        </view>
        <view class="flex c999 font28 mgt10">
          <view class="salon-item__left cc1a">{{ item.etm }}</view>
          <view class="salon-item__right">
            <view>{{ item.time}}</view>
            <view class="mgt8">讲师/演讲人:{{ item.lecturer }}</view>
          </view>
        </view>
      </view>
    </view>
  </m-card>
</template>
<script>
import  list from '../helper/salon'
export default {
  data() {
    return {
      list: list
    }
  },
}
</script>
<style lang="scss" scoped>
.salon {
  padding: 20rpx;

  &-item {
    &:not(:last-child) {
      padding-bottom: 50rpx;
      border-bottom: 2rpx dashed #DEDEDE;
    }

    &:not(:first-child) {
      padding-top: 40rpx;
    }
    &__left {
      width: 124rpx;
      flex-shrink: 0;
    }
    &__right {
      // margin-left: 40rpx;
    }
  }
}
</style>